<template>
	<div class="wrapper horizontal" :style="{
		height: props.sliderHeight,
	}">
		<ul class="container" ref="sliderRef" :style="{
			height: props.imgHeight != 'auto' ? props.imgHeight : false,
		}">
			<li class="cards-list" v-for="(item, index) in props.list" :key="index" @click="saveLogs(item)">
				<a :href="setSystemHref(item)" :target="item.component ? '_blank' : '_self'">
					<!-- 图片 -->
					<div class="img" :style="{
						// width: props.imgWidth,
						height: props.imgHeight,
					}">
						<img :src="proxy.getImageUrl('/images/slider/' + item.path + '.png')"
							:title="item.meta && item.meta.title ? item.meta.title : ''">
					</div>
					<!-- 内容 -->
					<div class="main-con" v-if="props.showContent">
						<h4 class="name">{{ item.name }}</h4>
						<p class="content">{{ item.content }}</p>
						<p class="label">{{ item.label }}</p>
					</div>
				</a>
			</li>
		</ul>
		<ul class='navigation' v-if="props.showNavigation">
			<li v-for="(item, index) in props.list" :key="index" class="dot"></li>
		</ul>
		<i class="btn-direct btn-left" ref="prevRef">
			<img v-if="props.privIcon && props.privIcon.type == 'img'" :src="proxy.getImageUrl(props.privIcon.path)"
				alt="left">
			<span v-else-if="props.privIcon.icon" :class="props.privIcon.icon"></span>
			<span v-else class="shift-left"></span>
		</i>
		<i class="btn-direct btn-right" ref="nextRef">
			<img v-if="props.nextIcon && props.nextIcon.type == 'img'" :src="proxy.getImageUrl(props.nextIcon.path)"
				alt="right">
			<span v-else-if="props.nextIcon.icon" :class="props.nextIcon.icon"></span>
			<span v-else class="shift-right"></span>
		</i>
	</div>
</template>

<script setup>
// 引入empile.js
import Empile from './empile';
// 引入添加日志接口
import { addLogsApi } from '@/api/iconModle/logManage.js';
// 公用方法
import { parseTime } from "@/utils/ruoyi.js";

// 获取当前实例
const { proxy } = getCurrentInstance();
// 父组件传参
const props = defineProps({
	// 轮播图总高度 
	sliderHeight: {
		type: String,
		default: 'auto'
	},
	// 图片宽高
	imgWidth: {
		type: String,
		default: 'auto'
	},
	imgHeight: {
		type: String,
		default: 'auto'
	},
	// 下一个按钮图标
	nextIcon: {
		type: Object,
		default: {},
	},
	// 上一个按钮图标
	privIcon: {
		type: Object,
		default: {},
	},
	// 轮播列表
	list: {
		type: Array,
		default: () => []
	},
	// 显示内容区域
	showContent: {
		type: Boolean,
		default: () => false
	},
	// 显示导航按钮
	showNavigation: {
		type: Boolean,
		default: () => true
	},
	// 自动播放
	autoplay: {
		type: [Object, Boolean],
		// true或false，默认为false，为true时，自动轮播间隔为4000毫秒；
		// 对象
		default: {
			// 轮播间隔，单位为毫秒。如为0，表示不自动轮播。
			delay: 4000,
			// 页面不可见时是否关闭自动轮播。不填则默认立即关闭，false则不关闭，true则为延迟2秒关闭，传入delay属性亦可自定义延迟关闭定时器时间。
			docHiddenOff: true,
		}
	}
});

// 初始化轮播
function initSlider() {
	if (proxy.$refs.sliderRef && Empile) {
		// 组件初始化
		const empile1 = new Empile(proxy.$refs.sliderRef, {
			// 自动播放
			autoplay: props.autoplay,
			// 等待过渡
			waitForTransition: true,
			// 点击切换
			isClickSlide: true,
			// 导航栏
			navigation: {
				prevEl: proxy.$refs.prevRef,
				nextEl: proxy.$refs.nextRef,
			},
			// 事件绑定
			on: {
				//卡片切换时执行
				slideChange: function () {
					// console.info(this.activeIndex + 1);
				},
				// 过渡开始执行
				transitionStart: function (empile) {
					// console.info('start');
				},
				// 过渡完成执行
				transitionEnd: function (empile) {
					// console.info('end');
				},
				// 点击上一张
				clickPrevBtn: function (ev) {
					// console.info(ev.target);
				},
				// 点击下一张
				clickNextBtn: function (ev) {
					// console.info(ev);
				},
				clickSlideBtn: function (ev) {
					// console.info(ev);
				},
				clickPaginationBullet: function (ev) {
					// console.info(ev.target);
				},
				toEdge: function (empile) {
					// console.info(empile.activeIndex);
				},
				pageHidden: function (empile) {
					// console.info('hidden');
				},
				pageVisible: function (empile) {
					// console.info('visible');
				}
			},
			// 分页
			pagination: {
				el: document.querySelector('.navigation'),
				clickable: true,
				bulletClass: 'dot',
				bulletActiveClass: 'active',
			},
			// 样式处理
			css: function (coord, absCoord, index) {
				const zIndex = 100 - absCoord,
					opacity = Math.pow(.92, absCoord).toFixed(3), // 透明度
					scale = 'scale(' + Math.pow(.88, absCoord).toFixed(2) + ')', // 缩放
					translateX = 'translateX(' + (300 - absCoord * 21) * coord / 16 + 'rem)', //平移距离
					rotateY = coord ? 'rotateY(' + 3 * (coord > 0 ? 1 : -1) + 'deg)' : ''; //旋转

				const transform = [translateX, scale, rotateY].join(' ');
				return {
					zIndex: zIndex,
					// opacity: opacity,
					transform: transform,
				}
			},
		});
	}
}
// 添加日志
function saveLogs(logs) {
	addLogsApi({
		funcId: logs.name, // 功能名称
		relObjType: 'Open subsystem',
		logMemo: logs.meta.title, // 说明
		serverName: logs.menuRouter, // 服务名称
		logData: parseTime(new Date()), // 时间
	}).then(res => {
		const { code, data, message } = res;
		if (code == 200) {
			console.log('添加日志成功！跳转：' + logs.menuRouter)
		}
	}).catch(err => {
		console.error(err.message || '添加日志失败！')
	})
}
// 设置系统访问路径
function setSystemHref(item) {
	// 默认不可点击
	let strHref = 'javascript:void(0)';
	// 判断是否有配置访问地址
	if (item.component) {
		strHref = item.component;
	}
	return strHref;
}

// 组件已挂载
onMounted(() => {
	// 初始化轮播
	initSlider();
})
</script>

<style lang="scss" scoped>
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

img {
	border: none;
}

em,
i {
	font-style: normal;
}

.site {
	overflow: hidden;
}

.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	h3 {
		position: absolute;
		left: 4rem;
		top: 4rem;
		z-index: 1000;
		padding: 0 1rem;
		background-color: #fff;
		font-size: 1.4rem;
		font-weight: 400;
		color: #222;
		border-radius: 1.4rem;
	}

	.container {
		position: relative;
		/* margin: 0 auto; */
		/* 透视 */
		perspective: 288;
		-webkit-perspective: 288;
	}
}

/* 水平方式 */
.horizontal {
	.container {
		width: 18rem;
		height: 20rem;
	}

	.cards-list {
		width: 100%;
	}

	// 上一张、下一张
	.shift-left {
		transform: translateX(25%) rotate(-45deg);
	}

	.shift-right {
		transform: translateX(-25%) rotate(135deg);
	}
}


/* 垂直方式 */
.vertical {
	.container {
		width: 37rem;
		height: 14rem;
	}

	.cards-list {
		display: flex;
		height: 100%;
	}

	.img,
	.main-con {
		height: 100%;
	}

	.img {
		width: 18rem;
	}

	.main-con {
		width: 19rem;
	}

	// 上一张、下一张
	.shift-left {
		transform: translateY(25%) rotate(45deg);
	}

	.shift-right {
		transform: translateY(-25%) rotate(-135deg);
	}
}

/* 主体区域 */
.container {
	.cards-list {
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		// background-color: #f4f4f4;
		border-radius: 0.3125rem;
		transition: 330ms;
	}

	.img>img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		-webkit-user-drag: none;
		-moz-user-select: none;
		user-select: none;
		transform: rotateY(0);
	}
}

.main-con {
	padding: 0 1rem;
	box-sizing: border-box;

	.name {
		padding-top: 1rem;
		font-size: 1.2rem;
		font-weight: 600;
		color: #424242;
	}

	.content {
		padding-top: 1rem;
		height: 4.5rem;
		font-size: 0.9rem;
		color: #777;
		text-align: justify;
		line-height: 1.4rem;
	}

	.label {
		font-size: 0.9rem;
		color: #555;
		padding: 1rem 0;
	}
}

/* 上下切换按钮 */
.btn-direct {
	position: absolute;
	top: 50%;
	z-index: 100000;
	width: 4rem;
	height: 4rem;
	transform: translateY(-50%);
	cursor: pointer;
	transition: .2s;

	>span {
		position: absolute;
		left: calc(50% - .6rem);
		top: calc(50% - .6rem);
		width: 1.2rem;
		height: 1.2rem;
		border-top: 0.2rem solid #fff;
		border-left: 0.2rem solid #fff;
	}
}

.btn-left {
	left: 6rem;
}

.btn-right {
	right: 6rem;
}

/* 导航栏 */
.navigation {
	position: absolute;
	bottom: 5rem;
	left: 50%;
	transform: translate(-50%);

	.dot {
		display: inline-block;
		width: .5rem;
		height: .5rem;
		margin: .5rem;
		border: .125rem solid #fff;
		background-color: #fff;
		border-radius: 100%;
		cursor: pointer;
	}

	.dot.active {
		background-color: transparent;
	}
}

/******************** 响应式布局 **********************/
@media screen and (max-device-width: 768px) {
	.btn-left {
		left: 1rem;
		text-align: center;
	}

	.btn-right {
		right: 1rem;
		text-align: center;
	}
}
</style>